<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行内级元素-输入框(line level element input box)</title>
  <!-- 
    HTML中的输入元素（Input）是用于接收用户输入的常见表单元素，可以通过HTML和CSS来创建和样式化。以下是关于HTML和CSS输入元素的主要要点： 
 
      1. 输入类型（Input Type）：使用 <input> 标签定义输入元素，通过 type 属性指定输入类型，如文本框（text）、密码框（password）、
         单选按钮（radio）、复选框（checkbox）等。 
      2. 输入名称（Input Name）：使用 name 属性为输入元素指定名称，用于在提交表单时标识输入数据。 
      3. 输入值（Input Value）：使用 value 属性为输入元素设置默认值，用户可以在该基础上进行修改或输入。 
      4. 输入标签（Input Label）：使用 <label> 标签为输入元素添加标签，提供更好的可访问性和用户体验。 
      5. 输入样式（Input Style）：使用CSS样式可以自定义输入元素的外观，如设置背景颜色、边框样式、字体样式等。 
      6. 输入事件（Input Event）：可以使用JavaScript来处理输入元素的事件，如焦点事件、键盘事件等，实现交互功能。 
      7. 输入验证（Input Validation）：可以使用HTML5中的表单验证属性（如 required 、 pattern 等）或JavaScript来对输入数据进行验证，确保数据的合法性。 
      8. 输入布局（Input Layout）：可以使用CSS布局技巧控制输入元素的位置、大小和间距，实现灵活的表单布局。 
   -->
</head>
<body>
  
  <!-- 行内级元素 -->
  <div class="text">
    <input type="text">
    <input type="text" readonly>
    <input type="text" readonly="readonly">
    <input type="text" disabled>
    <input type="text" autofocus>
  </div>
  <div class="password">
    <input type="password">
  </div>
  <div class="time">
    <input type="time">
  </div>
  <div class="date">
    <input type="date">
  </div>
  <div class="file">
    <input type="file">
  </div>

  
</body>
</html>